<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            margin:0;
            padding: 0;
        }

        body {
            overflow-x: hidden;
        }

        .head {
            position: absolute;

        }

        main {
            margin: 0;
            padding: 0;
        }

        .img1 {
            margin-left: 0;
            width: 100%;
            height: 100%;
        }
        #container .imgbox{
            height: 216px;
            width: 384px;
        }
        #container .box-img {
            position: relative;/*相对布局*/
            z-index: -1;/*置于底层*/
        }
        #container .box-font {
            font-size: 20px;
            color: ivory;
            position: absolute;/*绝对布局*/
            z-index: 1;/*置于上层*/
            display: inline;
            top: 0;
            right: 0;
        }
        h2{
            padding-top: 156px;
            text-align: center;
            font-size: 50px;
        }
        .health{
          border-radius: 20px;
            background-image: linear-gradient(#F6CE96,#F7D9AF);
            width: 200px;
            height: 200px;
            text-align: center;
            margin-top: 108px;

        }
        .font{
            display: none;
            font-size: 25px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="head">
                <el-row gutter="20">
                    <el-col span="6">
                        <a href="/" target="_self">
                            <img src="../imgs/logo/logo.png" height="100%" width="1000"/>
                        </a>
                    </el-col>
                    <el-col span="10">
                        <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">了解详情</el-menu-item>
                            <el-menu-item index="3">Sheep商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="8">
                        <el-input style="margin-top: 15px; width: 50%" placeholder="请输入搜索的关键字"></el-input>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                        <el-button type="info">注册</el-button>

                        <el-button type="success">登录</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main style="padding: 20px 0;">
            <img class="img1" src="../imgs/vip详情/member.png"/>
            <el-main>
                     <h2>专属服务</h2>
                <el-row gutter="10">
                    <el-row :gutter="20">
                        <el-col :span="6" >

                            <div class="health">
                            </div>
                            <h3 class="font">健康方案</h3>
                        </el-col>
                        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    </el-row>
                </el-row>
            </el-main>

        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {}
    })
</script>

</html>